<template>
	<view class="container">
		<view style="width: 750rpx;height: 1rpx;"></view>
		<!-- 筛选 - start -->
		<view class="choose">
			<view style="height: 15upx;"></view>
			<v-tabs fontSize="34upx" v-model="current" :scroll="false" lineColor="#FF7E3E" activeColor="#FF7E3E" @change="changeTab" :tabs="['未使用','已使用','已过期']"></v-tabs>
		</view>
		<view style="width: 750rpx;height: 70rpx;"></view>
		<!-- 筛选 - end -->
		<view class="coupon-list-box" v-if="list.length>0">
			<view v-for="(item,index) in list">
				<!-- 可领取 - start -->
				<view class="coupon-info">
					<view class="coupon-text-box">
						<view class="coupon-text-money" :class="current == 0?'coupon-color-on':'coupon-color-off'">
							<view class="coupon-text-money-top">
								<text class="coupon-text-money-top-icon">￥</text>
								<text v-if="item.couponAmount < 10" class="coupon-text-money-top-num">{{item.couponAmount}}</text>
								<text v-else-if="item.couponAmount >= 10 && item.couponAmount < 100" class="coupon-text-money-top-num-1">{{item.couponAmount}}</text>
								<text v-else-if="item.couponAmount >= 100" class="coupon-text-money-top-num-2">{{item.couponAmount}}</text>
							</view>
							<view v-if="item.useAmout > 0" class="coupon-text-money-buttom">满{{item.useAmout}}可用</view>
						</view>
						<!-- 中间 -->
						<view class="coupon-center-box">
							<view class="coupon-center-top" :class="current == 0?'coupon-name-color':'coupon-color-off'">{{item.couponName}}</view>
							<view class="coupon-center-bottom">{{item.typeName}}</view>
							<view class="coupon-center-bottom">{{item.couponNo}}</view>
						</view>
            <view class="coupon-center-desc" v-if="item.instruction && current===0" @click="$refs.couponDescPop.show(item.instruction)">使用说明</view>
					</view>
					<!-- 底部 -->
					<view class="coupon-bottom-box">
						<view class="coupon-bottom-text">有效期：<text v-if="item.startTime">{{item.startTime}} ~ </text>{{item.endTime}}</view>
						<view class="coupon-bottom-text">{{item.shopNames}}</view>
					</view>
					<!-- 已使用 -->
					<image v-if="current == 1" class="coupon-type-img" src="https://tousubiaoyang-1301970825.file.myqcloud.com/tg1671510901671.png"></image>
					<!-- 已过期 -->
					<image v-if="current == 2" class="coupon-type-img" src="https://tousubiaoyang-1301970825.file.myqcloud.com/tg1671520517803.png"></image>
				</view>
			</view>
			<view style="width: 750rpx;height: 70rpx;"></view>
		</view>
		<view class="no-data-box" v-if="list.length==0">
			<no_order title="暂无优惠券"></no_order>
		</view>
    <coupon-desc-pop ref="couponDescPop"></coupon-desc-pop>
	</view>
</template>

<script>
import couponDescPop from "@/pages/my/components/couponDescPop.vue";
	export default {
    components: {
				couponDescPop
			},
		data() {
			return {
				postData:{
					page: 1,
					pageSize: 20,
					state: 0
				},
				list:[], // 数据列表
				current: 0, // 当前选中
				total: 0, // 总数
			}
		},
		onLoad(option) {
			this.getList()
		},
		methods: {
			// tap切换
			changeTab(index) {
				this.current = index;
				this.postData.page = 1;
				this.list = [];
				this.postData.state = index
			    this.getList();
			},
			// 获取优惠券列表
			getList(){
				var data=this.postData
					this.$javaApiErp.doRequest("post",'/group/customer/coupon/getMyCouponList',data,'json').then(res=>{
					// this.list = res.list
					res=res.data.data
					for(let i=0; i<res.list.length;i++){
						res.list[i].typeName = this.getCouponTypeName(res.list[i].couponType)
						this.list.push(res.list[i])
					}
					this.total = res.tolNum
				})
			},
			// 获取优惠券名称
			getCouponTypeName(type){
				switch(type){
					case 1:
					return '店铺代金券';
					break;
					case 2:
					return '店铺满减券';
					break;
					case 11:
					return '商品代金券';
					break;
					case 12:
					return '商品满减券';
					break;
				}
			},
			// 跳转到详情
			toOrder(){
				uni.navigateTo({
				    url: '/pages/userMy/order/index?type=0'
				});
			},
			// 判断是否滑动到底部
			onReachBottom(){
				console.log(this.isLoad)
				if(this.isLoad == false){
					return
				}
				if(this.list.length < this.total){
					this.postData.page = this.postData.page+1
					this.getList()
					console.log("加载数据的方法");
				}
			},
		}
	}
</script>

<style scoped>
	.container {
		font-size: 30rpx;
		background-color: #f8f8f8;
	}
	/* 优惠券 - start */
	.coupon-info{
		position:relative;
		margin: 36rpx 36rpx 0 36rpx;
		width: 678rpx;
		height: 270rpx;
		background: url('https://tousubiaoyang-1301970825.file.myqcloud.com/tg1670570842942.png')  no-repeat;
		background-size:100% 100%;
		box-sizing: border-box;
	}
	.coupon-text-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
    position: relative;
	}
	.coupon-color-on{
		color: #FF6E19;
	}
	.coupon-color-off{
		color: #999999;
	}
	.coupon-text-money{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		width: 260rpx;
		height: 191rpx;
		text-align: center;
	}
	.coupon-text-money-top{
	}
	.coupon-text-money-top-icon{
		font-size: 32rpx;
	}
	.coupon-text-money-top-num{
		font-size: 70rpx;
	}
	.coupon-text-money-top-num-1{
		font-size: 60rpx;
	}
	.coupon-text-money-top-num-2{
		font-size: 34rpx;
	}
	.coupon-text-money-buttom{
		font-size: 26rpx;
		text-align: center;
	}
	.coupon-text-line{
		width: 1rpx;
		height: 110rpx;
		border-left: 1rpx dashed #FF6800;
	}
	.coupon-text-line-no{
		width: 1rpx;
		height: 110rpx;
		border-left: 1rpx dashed #999999;
	}
	.coupon-center-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		padding: 0 20rpx;
	}
	.coupon-center-top{
		width: 432rpx;
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		display: -webkit-box;
		-webkit-line-clamp: 1; // 超出多少行
		-webkit-box-orient: vertical;
	}
	.coupon-name-color{
		color: #333333;
	},
	.coupon-center-bottom{
		font-size: 26rpx;
		color: #888888;
		line-height: 50rpx;
	}
	.coupon-bottom-box{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #888888;
		line-height: 80rpx;
		padding: 0 20rpx;
	}
	.coupon-type-img{
		position: absolute;
		right: 21rpx;
		top:26rpx;
		width: 119rpx;
		height: 119rpx;
	}
	/* 优惠券 - end */
	.no-data-box{
		display: flex;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.choose{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
		background-color: #ffffff;
	}
  .coupon-center-desc {
    position: absolute;
    top: 50%;
    right: 20upx;
    font-size: 28upx;
    transform: translate(0%,-50%);
    padding: 5upx 15upx;
    background-color: #FF6E19;
    color: #fff;
    border-radius: 28upx;
  }
</style>
